<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../jquery.min.js"></script>
    <script>
      $(function () {
        $('#btn1').click(function () {
          console.log('按钮点击了...111')
        })

        // 这里只能抽出来
        function cb2() {
          console.log('按钮点击了...222')
        }

        $('#btn1').click(cb2)

        $('#btn1').on('click', function () {
          console.log('按钮点击了...333')
        })

        $('#btn2').on('click', function () {
          // 将 #btn1 的所有 click 事件解绑
          $('#btn1').off('click')
        })

        $('#btn3').on('click', function () {
          // 注意：在解绑指定事件处理函数时，一定要拿到绑定时的事件处理函数对象
          $('#btn1').off('click', cb2)
        })

        function liCb() {
          console.log(this)
        }
        $('ul').on('click', 'li', liCb)
        $('ul').on('click', 'a', function () {
          console.log(this, 'aaa')
        })

        $('#btn4').on('click', function () {
          $('ul').off('click')
        })

        $('#btn5').on('click', function () {
          // $('ul').off('click') // 解绑ul所有的click事件
          // $('ul').off('click', 'li') // 解绑ul中对所有的li的click事件代理
          $('ul').off('click', 'li', liCb) // 解绑ul中对所有的li的click事件的liCb这个函数的代理
        })

        // $('p').one('click', function () {
        //   console.log('p click 事件触发了。。。')
        // })

        // 用 on 和 off 配合实现 one
        $('p').on('click', function () {
          $(this).off('click')
          console.log('p click 触发了...')
        })
      })
    </script>
  </head>
  <body>
    <p>只触发一次点击事件</p>
    <ul>
      <li>1 <a href="javascript:;">aaa1</a></li>
      <li>2 <a href="javascript:;">aaa2</a></li>
      <li>3 <a href="javascript:;">aaa3</a></li>
    </ul>
    <button id="btn1">按钮1</button>
    <button id="btn2">将按钮1点击事件解绑</button>
    <button id="btn3">将按钮1的第2个点击事件解绑</button>
    <button id="btn4">解绑ul</button>
    <button id="btn5">解绑ul中第二个li的click</button>
  </body>
</html>
